<template>
	<view class="markChart">
		<view class="head" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="left" @click="handleBack">
				<image src="/static/images/tabbar/back.png" class="back-icon" />
			</view>
			<image :src="token_img" class="icon" />
			<text class="title">{{token_name}}</text>
		</view>
		<view :style="{ paddingTop: statusBarHeight + 'px',width:'100%' }"></view>
		<view class="content">
			<view class="top">
				<view class="price">
					<text class="p1" :class="change >= 0 ? 'is-up' : 'is-down'">{{price}}</text>
					<text class="p2">≈{{ currencySymbol }}{{price}}</text>
				</view>
				<view class="address">
					<text>{{maskFront4Back2With3Stars(token_address)}}</text>
					<text class="iconfont icon-fuzhi" @tap.stop="copy(token_address)"></text>
				</view>
			</view>

			<view class="centent">
				<view class="box">
					<view class="item">
						<text class="label">流动性</text>
						<text class="value">{{ formatNumber(tvl) }}</text>
					</view>
					<view class="item">
						<text class="label">24h成交额</text>
						<text class="value">{{ formatNumber(vol24El) }}</text>
					</view>
					<view class="item">
						<text class="label">24h交易次数</text>
						<text class="value">{{ formatNumber(tx24EL) }}</text>
					</view>
				</view>
				<text class="line"></text>
				<view class="box">
					<view class="item">
						<text class="label">市值</text>
						<text class="value">{{ formatNumber(market_cap_usd) }}</text>
					</view>
					<view class="item">
						<text class="label">总量</text>
						<text class="value">{{ formatNumber(total_supply) }}</text>
					</view>
					<view class="item">
						<text class="label">持有人数</text>
						<text class="value">{{ ormatNumberToThousands(holders) }}</text>
					</view>
				</view>
			</view>

			<view class="chart">
				<view class="chart-section">
					<!-- <web-view src="https://wallet.jppocket.com/kline.html" :webview-styles="webviewStyles"
						:fullscreen="false"></web-view> -->
					<kline :id="id"></kline>

				</view>
			</view>
			<view class="tradbox">
				<view class="tratt">
					<text>交易记录</text>
					<view class="tab">
						<view class="tabitem" :class="{'act':act==1}" @click="tab('1')">所有</view>
						<view class="tabitem" :class="{'act':act==2}" @click="tab('2')">买入</view>
						<view class="tabitem" :class="{'act':act==3}" @click="tab('3')">卖出</view>
					</view>
				</view>
				<view class="ultitle">
					<text class="t1">时间</text>
					<text class="t2">价格($)</text>
					<text class="t3">数量(YZY)/价值($)</text>
					<text class="t4">用户</text>
				</view>
				<view class="ul">
					<view class="li" v-for="(item,index) in list" :key="index">
						<text class="time">{{item.timestamp}}</text>
						<text class="price">{{loorToFourDecimals(item.price_usd)}}</text>
						<view class="nump">
							<view><text class="num">{{loorToFourDecimals(item.amount)}}</text></view>
							<view><text class="p">${{loorToFourDecimals(item.value_usd)}}</text></view>
						</view>
						<view class="add">
							<text class="address">{{maskFront4Back2With3Stars(item.from_address)}}</text>
							<text class="iconfont icon-fuzhi" @tap.stop="copy(item.from_address)"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pairInfo,
	} from '@/http/api.js';
	export default {
		data() {
			return {
				webviewStyles: {
					width: "80%",
					height: "200px",
					left: "",
					top: ""
				},
				statusBarHeight: 0,
				currencySymbol: "$",
				chartData: [],
				id: "",
				token_name: "",
				token_img: "",
				token_address: "",
				price: "",
				change: "",
				tvl: "",
				vol24El: "",
				tx24EL: "",
				holders: "",
				total_supply: "",
				market_cap_usd: "",
				trade: {
					all: [],
					buy: [],
					sell: [],
				},
				list: [],
				act: 1,



			};
		},
		methods: {
			loorToFourDecimals(num) {
			    return Math.floor(num * 1000000) / 1000000;
			},
			tab(num) {
				this.act = num
				if (num == 1) {
					this.list = this.trade.all
				} else if (num == 2) {
					this.list = this.trade.buy
				} else if (num == 3) {
					this.list = this.trade.sell
				}
			},
			formatNumber(num) {
				if (num == null || num === '') return '-';
				const n = Number(num);
				if (isNaN(n)) return num;

				// 大数字简写
				if (n >= 1e9) return (n / 1e9).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'B';
				if (n >= 1e6) return (n / 1e6).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'M';
				if (n >= 1e3) return (n / 1e3).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + 'K';

				// 小数字加千分位
				return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			},
			ormatNumberToThousands(num) {
				if (num === null || num === undefined) return ''
				return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
			},
			maskFront4Back2With3Stars(str) {
				if (typeof str !== 'string') str = String(str ?? '');

				// 去除头尾空白（如果你不想 trim，可以去掉这行）
				const s = str.trim();

				if (s.length === 0) return '';

				const prefix = s.slice(0, 4); // 前4
				const suffix = s.slice(-2); // 后2（若不足则取现有末尾）
				return `${prefix}***${suffix}`;
			},
			handleBack() {
				uni.navigateBack();
			},
			formatPrimaryPrice(value) {
				return value.toLocaleString(undefined, {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2,
				});
			},
			formatSecondaryPrice(value) {
				return value.toLocaleString(undefined, {
					minimumFractionDigits: 3,
					maximumFractionDigits: 3,
				});
			},
			formatPercentage(value) {
				return `${value >= 0 ? "+" : "-"}${Math.abs(value).toFixed(2)}%`;
			},
			formatTime(time) {
				return time;
			},
			getdata() {
				// this.showLoading()
				var param = {
					id: this.id
				}
				pairInfo(param).then((res) => {
					if (res.code == 200) {
						// console.log(res);
						this.token_name = res.data.token_name
						this.token_img = res.data.token_img
						this.token_address = res.data.token_address
						this.price = res.data.price
						this.change = res.data.change
						this.tvl = res.data.tvl
						this.vol24El = res.data.vol24El
						this.tx24EL = res.data.tx24EL
						this.holders = res.data.holders
						this.total_supply = res.data.total_supply
						this.market_cap_usd = res.data.market_cap_usd
						this.trade.all = res.data.trade.all
						this.trade.buy = res.data.trade.buy
						this.trade.sell = res.data.trade.sell
						if (this.act == 1) {
							this.list = res.data.trade.all
						} else if (this.act == 2) {
							this.list = res.data.trade.buy
						} else if (this.act == 3) {
							this.list = res.data.trade.sell
						}
					}
				}).catch(err => {
					// console.log(err);
				}).finally(() => {
					// this.hideLoading()
				})
			},
			copy(address) {
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			}

		},
		onLoad(options) {
			this.id = options.id
		},
		mounted() {
			this.getdata()
		},
		created() {
			if (uni.getSystemInfoSync().platform === "h5") {
				this.statusBarHeight = 0;
			} else {
				uni.getSystemInfo({
					success: (e) => {
						this.statusBarHeight = e.statusBarHeight;
					},
					fail: () => {
						this.statusBarHeight = 20; // 设置默认值
					},
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "/static/iconfont/iconfont.css";

	.head {
		height: 100upx;
		background: #f6f6f6;
		display: flex;
		padding: 0 20upx;
		align-items: center;
		position: fixed;
		width: 100%;
		z-index: 999;

		.left {
			width: 60upx;
			display: flex;
			justify-content: center;
		}

		.back-icon {
			width: 32upx;
			height: 32upx;
		}

		.icon {
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			background: #fff;
		}

		.title {
			margin-left: 20upx;
			font-size: 30upx;
		}
	}

	.content {
		padding-top: 100upx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 30upx 0;

			.price {
				.p1 {
					font-size: 40upx;
				}

				.is-up {
					color: #16A47A;
				}

				.is-down {
					color: #E96054;
				}

				.p2 {
					font-size: 20upx;
					color: #767676;
					margin-top: 6upx;
				}
			}

			.address {
				display: flex;
				align-items: center;
				background: #f5f6f8;
				font-size: 24upx;
				color: #767676;
				padding: 8upx 14upx;
				border-radius: 20upx;

				p {
					margin-right: 8upx;
				}

				.iconfont {
					font-size: 20upx;
				}
			}
		}

		.centent {
			display: flex;
			margin-top: 22upx;
			padding: 0 30upx;

			.line {
				width: 1upx;
				height: 90upx;
				background: #f3f3f3;
				margin: 0 24upx;
			}

			.box {
				flex: 1;
				height: 90upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item {
					display: flex;
					justify-content: space-between;
					height: 30upx;

					.label {
						font-size: 20upx;
						color: #767676;
					}

					.value {
						font-size: 22upx;
						color: #2c2c2c;
					}
				}
			}
		}

		.chart {
			padding: 0 30upx;

			.chart-section {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 460upx;

				.webView {
					width: 100%;
					height: 100%;
					/* 固定高度，可以自己调，比如 600rpx 或 80vh */
					border-radius: 12rpx;
					overflow: hidden;
				}
			}



		}

		.tradbox {
			.tratt {
				display: flex;
				justify-content: space-between;
				font-size: 30upx;
				align-items: center;
				padding: 0 30upx;
			}

			.tab {
				display: flex;
				background: #F5F6F8;
				font-size: 24upx;
				padding: 4upx;
				align-items: center;
				gap: 12upx;

				.tabitem {
					padding: 12upx;
					border-radius: 10upx;
				}

				.act {
					background: #FFF;
				}
			}

			.ultitle {
				display: flex;
				font-size: 24upx;
				color: #767676;
				border-bottom: 1px solid #F2F2F2;
				padding: 10upx 30upx;

				.t1 {
					width: 150upx;
				}

				.t2 {
					width: 150upx;
					text-align: center;
				}

				.t3 {
					width: 240upx;
					text-align: center;
				}

				.t4 {
					display: flex;
					flex: 1;
					justify-content: flex-end;
				}
			}

			.ul {
				padding: 0 30upx;

				.li {
					display: flex;
					font-size: 24upx;
					align-items: center;
					color: #454545;
					padding: 10upx 0;

					.time {
						width: 150upx;
					}

					.price {
						width: 150upx;
						text-align: center;
					}

					.nump {
						width: 240upx;
						text-align: center;

						.num {}

						.p {
							font-size: 20upx;
							color: #767676;
						}
					}

					.add {
						display: flex;
						flex: 1;
						justify-content: flex-end;
						align-items: center;

						.iconfont {
							font-size: 20upx;
							margin-left: 8upx;
						}
					}
				}
			}
		}
	}
</style>